<template>
  <view class="page">
    <!-- 本页导航标题 start -->
    <view class="cu-custom">
      <view class="cu-bar fixed bg-theme" :style="{height: CustomBar+'px',paddingTop: StatusBar+'px'}">
        <view class="action" @tap="backPage">
          <text class="cuIcon-back  text-white"></text>
        </view>
        <view class="content" :style="[{top:StatusBar+'px'}]">
          <view class="text-lg text-white">{{i18n['我的积分']}}</view>
        </view>
      </view>
    </view>
    <!-- 本页导航标题 end -->

    <!-- 积分统计 start -->
    <view class="con bg-theme marg-top-8 ">
      <!-- 页面跳转到我的积分商城 start -->
      <navigator url="/pages/integral/integralgoods/integral-goods-list/index" class="shop_btn">{{i18n['积分商城']}}</navigator>
      <!-- 页面跳转到我的积分商城 end -->
      <view class="con_jifen">
        <view class="flex flex-direction justify-center align-center text-white">
          <text style="font-size:48upx;font-weight:400;">{{ user_msg.score || '0' }}</text>
          <text style="font-size:24upx;font-weight:400;opacity:1;">{{i18n['可用积分']}}</text>
        </view>
        <view class="flex justify-center align-center" style="height: 120upx;">
          <view style="height: 50upx;width: 2upx;background: #FFFFFF;"></view>
        </view>
        <view class="flex flex-direction justify-center align-center text-white">
          <text style="font-size:48upx;font-weight:400;">{{ user_msg.score || '0' }}</text>
          <text style="font-size:24upx;font-weight:400;opacity:1;">{{i18n['当前积分']}}</text>
        </view>
      </view>
    </view>
    <!-- 积分统计 end -->
    <view class="flex justify-between align-center padding-lr solid-bottom height-80" style="height: 100upx;background:rgba(246,246,246,1);">
      <view><text class="text-df">{{i18n['积分明细']}}</text></view>
    </view>
    <!-- 积分明细列表 start -->
    <view :style="{height: 'calc(100% - 200rpx - 100rpx - '+CustomBar+'px)'}">
      <block v-for="(item, index) in listData" :key="index">
        <view class="padding-lr padding-tb-sm flex solid-bottom">
          <view class="flex justify-center align-center" style="width: 40rpx;margin-right: 20upx;">
            <text class="cuIcon-medal text-theme" style="font-size: 42rpx;color: rgba(255, 187, 42, 1);"></text>
          </view>

          <view>
            <view class="text-df">{{ item.remark }}</view>
            <view class="text-sm text-gray margin-top-xs">{{ item.create_time }}</view>
          </view>
          <view class="flex-sub text-xl flex justify-end align-center text-theme" style="font-size:32upx;font-weight:400;">{{ item.change_score>0?'+':''}}{{item.change_score}}</view>
        </view>
      </block>
      <!-- 分页组件 start-->
      <fu-empty
        :paging-list-loaded-all="pagingListLoadedAll"
        :paging-list-no-list-data="pagingListNoListData"
        :list-data-length="listDataLength"
        :isLoadInit="isLoadInit"></fu-empty>
      <!-- 分页组件 end -->
      <!-- 网络检测 start -->
      <fu-notwork></fu-notwork>
      <!-- 网络 end -->
    </view>
    <!-- 积分明细列表 end -->
  </view>
</template>

<script>
  import pagingList from '@/common/mixin/paging_list.js'; //引入混合开发 方法
  export default {
    mixins: [pagingList],
    data() {
      return {
        isOnload:false,
        CustomBar: this.CustomBar, //获取状态栏的高度
        user_msg: {}, //用户详细资料
        minixPagingListsApi: global.apiUrls.postGetScoreList, //分页请求路径
      };
    },
    /**
     * 获取主题颜色
     */
    computed: {
      themeColor() {
        return this.$store.state.themeColor
      }
    },
    onShow() {
      this.get_user_info();
      if(this.isOnload){
        this.pagingListToggle()
      }
      this.isOnload = true
    },
    methods: {
      /**
       * @description 返回上一个页面
       */
      backPage() {
        uni.navigateBack({
          delta: 1
        });
      },
      /**
       * @description 获取我的详细信息
       */
      get_user_info() {
        this.$api.post(global.apiUrls.postGetUserInfo, {
            user_id: global.userInfo.id
          })
          .then(res => {
            console.log(res, '用户信息');
            if (res.data.code == 1) {
              this.user_msg = res.data.data;
            }
          });
      },
    },

  };
</script>

<style lang="scss" scoped>
  .page {
    height: 100%;
    min-height: 100%;
  }

  // 积分统计 start
  .marg-top-8 {
    margin-top: 80rpx
  }

  .con {
    position: relative;
    height: 250upx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 50upx;

    .con_jifen {
      margin-top: 70upx;
      height: 120upx;
      width: 80%;
      display: flex;
      justify-content: space-around;
    }
  }

  .text-df {
    font-size: 32upx;
    font-weight: 500;
    color: #333333;
  }

  // 积分统计 end
  //积分商城按钮 start
  .shop_btn {
    position: absolute;
    right: 0;
    top: 55%;
    color:$theme;
    background: rgba(255, 255, 255, 0.65);
    padding: 10rpx;
    font-size: $uni-font-size-sm;
    margin-top: -1.5em;
  }

  //积分商城按钮 end
</style>
